<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/layer-v2.4/layer/layer.js"></script>

<style>
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
a,a:hover{ text-decoration:none;}
pre{font-family:'微软雅黑'}
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
.photos-demo img{width:200px;}
.eg-type {
    width: 70%;
    margin: 0 auto;
    height: 40px;
    padding: 10px;
}
.button {
    width: 80px;
    height: 20px;
    line-height: 20px;
    font-size:14px;
    display:inline-block;
    background-color: #333333;
    text-align: center;
}

.desc {
    width: auto;
    height: 20px;
    line-height: 20px;
    font-size:12px;
    font-color: green;
    display:inline-block;
    margin-left: 20px;
}

</style>
</head>
<body>
    <div class="eg-type">
        <div class="button" id="caption">提示</div>
        <div class="desc">点击弹出一个提示, 点确定关闭, 类似alert</div>
    </div>
    <div class="eg-type">
        <div class="button" id="confirm">确认</div>
        <div class="desc">点击弹出一个确认, 点确定或取消关闭, 类似confirm</div>
    </div>
    <div class="eg-type">
        <div class="button" id="iframe">iframe弹窗</div>
        <div class="desc">点击弹出一个窗口, 里面加载一个页面内容</div>
    </div>
    <div class="eg-type">
        <div class="button" id="loading">加载中</div>
        <div class="desc">加载中等待效果</div>
    </div>
</body>
<script type="text/javascript">
    $("#caption").click(function (e) {
            layer.alert("haha");
    });
    $("#confirm").click(function (e) {
            layer.confirm("haha", {
                    shade: 0.6,
                    shadeClose: true,
                    yes: function () {
                        layer.msg("你选择了确定");
                    },
                    btn2: function () {
                        layer.msg("你选择了取消");
                    },
                    cancel: function () {
                        layer.msg("你选择了取消");
                    }
                });
    });
    $("#iframe").click(function (e) {
            layer.open({
                 type: 2,
                 title: 'layer mobile页',
                 shadeClose: false,
                 shade: 0.8,
                 area: ['680px', '90%'],
                 content: 'http://layer.layui.com/mobile/' //iframe的url
             });
    });
    $("#loading").click(function (e) {
            var index = layer.load(1, {
                    shade: [0.1,'#fff'], //0.1透明度的白色背景
                    shadeClose: false
            });
            setTimeout(function(){
                layer.close(index);
            }, 8000);
    });
</script>
</html>
